<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer" />
    <title></title>
    <!-- <script src="https://gitee.com/gtx_197/for_all/raw/master/axios.min.js"></script> -->
    <script src="http://47.94.91.67/demo_file/js/jquery-3.7.1.js"></script>
    <script type="text/javascript" src="http://47.94.91.67:10100/web-apps/apps/api/documents/api.js"></script>

    <style>
        body {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            margin: 0px 0px;
        }

        

        .main_container{
            width: 100%;
            height: 100%;
            display: flex;
        }
        #placeholder {
            width: 100%;
            height: 100%;
        }
        .placeholder_container{
            width: 70%;
            height: 100%;
        }
        .tool_container{
            width: 10%;
            height: 100%;
            text-align: center;
            margin: auto;
        }
        #rela_container{
            width: 20%;
            height: 100%;
        }
        #tool_btn{
            width: 100px;
            height: 200px;
            font-size: 25px;
        }
        #tool_btn:hover{
            background: #ff0000;
        }
        .rela_btn_row{
            height: 50px;
            background: #ff0000;
            display: flex;
            align-items: center;
        }
        .rela_btn_row:nth-child(even){
            background: #000;
        }
        .rela_btn:hover{
            background: #106ebe;
        }
    </style>
</head>

<body>
    
    <div class="main_container">
        <div class="placeholder_container"><div id="placeholder" class="nav" style="width: 100%; height: 100vh;"></div></div>
        <div class="tool_container">
            <button id="tool_btn" onclick="callCommand()">增加批注</button>
        </div>
        <div id="rela_container">
            <!-- <div class="rela_btn_row rela_btn_row_1001"><button id="rela_btn rela_btn_1001" onclick="">超链接ID：1001</button></div>
            <div class="rela_btn_row rela_btn_row_1001"><button id="rela_btn rela_btn_1001" onclick="">超链接ID：1001</button></div> -->
        </div>
    </div>
</body>
<script>
    var insertText = '输入一段字符串';


    function callCommand() {
        var comStr = "意见类型：建议修改\n";
        comStr += "意见快捷标签：风险高\n";
        comStr += "意见内容：该描述有法律风险，请修改\n";
        Asc.scope = {
            comStr: comStr
        }
        connector.callCommand(function () {
            var oDocument = Api.GetDocument();
            var oRange = oDocument.GetRangeBySelect();
            if (!oRange) {
                return {error: 1, msg:'请先选中需要增加批注的文字'};
            }
            oRange = oDocument.GetRangeBySelect();
            // var comStr = "意见类型：建议修改\n";
            // comStr += "意见快捷标签：风险高\n";
            // comStr += "意见内容：该描述有法律风险，请修改\n";
            var oComments = Api.AddComment(oRange, Asc.scope.comStr, "曹瑞", "userId");
            var thisCommentId = oComments.Comment.Id;
            return {error: 0, data:thisCommentId};
        }, function (data) {
            if(data.error == 0){
                addRelaBtn(data.data+"");
            }else{
                alert(data.msg);
            }
            
         });

    }

    

    function addRelaBtn(commentId){
        var str = '<div class=" rela_btn_row rela_btn_row_'+commentId+'">';
            str += '<button class="rela_btn" id="rela_btn_'+commentId+
            '" onclick="scrollToComment(\''+commentId+'\')">跳转评论ID：'+commentId+'</button>';
            str += '<button class="rela_btn" onclick="delComment(\''+commentId+'\')">删除评论ID：'+commentId+'</button>';
            str += '</div>';
        $('#rela_container').append(str);
    }

    function scrollToComment(commentId){
        
        Asc.scope = {
            commentId: commentId
        }
        connector.callCommand(function () {
            var oDocument = Api.GetDocument();
            var aComments = oDocument.GetAllComments();
            for (var i = 0; i < aComments.length; i++) {
                var ele = aComments[i];
                if(ele.Comment.Id != Asc.scope.commentId){
                    continue;
                }
                ele.Comment.ScrollTo();
                break;
            }
            oDocument.Document.SelectComment(Asc.scope.commentId, true);
            oDocument.Document.ShowComment([Asc.scope.commentId]);
        }, function (data) {
            
        });
    }

    function delComment(commentId){
        Asc.scope = {
            commentId: commentId
        }
        connector.callCommand(function () {
            var oDocument = Api.GetDocument();
            var aComments = oDocument.GetAllComments();
            for (var i = 0; i < aComments.length; i++) {
                var ele = aComments[i];
                if(ele.Comment.Id == Asc.scope.commentId){
                    ele.Delete();
                    break;
                }
                
            }
        }, function (data) {
            $('.rela_btn_row_'+Asc.scope.commentId).remove();
        });
    }

    function initComments(){
        connector.callCommand(function () {
            var idArr = [];
            var oDocument = Api.GetDocument();
            var aComments = oDocument.GetAllComments();
            for (var i = 0; i < aComments.length; i++) {
                var ele = aComments[i];
                idArr.push(ele.Comment.Id);
            }
            return idArr;
        }, function (data) {
            for(var i=0;i<data.length;i++){
                addRelaBtn(data[i]);
            }
        });
    }

    var commentIndex = 0;
    

    var onDocumentReady = function () {
        console.log("文档准备好了");
        window.connector = docEditor.createConnector();
        initComments();
        connector.attachEvent(
            "onInnerClickComment", 
            function(data){
                console.log(111, data);
                console.log('选中评论ID：', data.arrId[0]);
                var tempIntval = setInterval(function(){
                    $('.rela_btn_row_'+data.arrId[0]).fadeOut(200).fadeIn(200);
                    
                });
                setTimeout(function(){
                    clearInterval(tempIntval);
                }, 5);
            }
        );
        

    
    };

    function getUuid() {
        return 'xxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = (Math.random() * 16) | 0,
                v = c == 'x' ? r : (r & 0x3) | 0x8;
            return v.toString(16);
        });
    }


    var config = {
        "type": "desktop",
        "documentType": "word",
        "historyList": {
            "history": [],
            "currentVersion": "1"
        },
        "document": {
            "title": "【经营】通用合同模板.docx",
            "url": "http://47.94.91.67/demo_file/comment_test.docx",
            "permissions": {
                "print": true,
                "download": true,
                "edit": true,
            },
            "fileType": "docx",
            "key": getUuid(),
        },
        "editorConfig": {
            "customization": {
                "autosave": false,
                "compactToolbar": false,
                "forcesave": true,
                "toolbarNoTabs": true,
                "help": false,
                "compactHeader": false,
                "hideRightMenu": true,
                "plugins": true
            },
            "mode": "edit",
            "callbackUrl": "https://www.onlyoffice.com/post.ashx?type=editor-callback",
            "callbackUrl": "https://api.docs.onlyoffice.com/dummyCallback",
            "lang": "zh-CN",
            "user": {
                "name": "曹瑞剑雄",
                "id": "104"
            },

        }
    };


    var docEditor;
    initDocEditor();



    /**
     * 初始化编辑器
     */
    function initDocEditor() {
        // 初始化配置
        config['events'] = {
            onDocumentReady: onDocumentReady
        };
        config.editorConfig.customization.autosave = false;
        config.editorConfig.customization.forcesave = true;
        console.log(config);
        docEditor = new DocsAPI.DocEditor("placeholder", config);
    }


</script>

</html>